<template>
  <div class="cost-strategy">
    <div>
      <el-form>
        <el-form-item label="方案：">
          <el-select v-model="searchForm.scheme" placeholder="请选择方案" size="small" @change="changeScheme">
            <el-option v-for="(item, index) in schemeData" :key="index" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台类型：">
          <el-select v-model="searchForm.platformType" placeholder="请选择平台" size="small" @change="changeValue">
            <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="类型：">
          <el-select v-model="searchForm.payType" placeholder="请选择任务类型" size="small">
            <el-option v-for="(item, index) in taskTypeData" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item><el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button></el-form-item> -->
      </el-form>
    </div>
    <div>
      <div class="btn-list">
        <el-button class="create-btn" @click="showCreatSchemeDialog">创建方案</el-button>
        <el-button class="add-btn" v-if="searchForm.payType == 1 && searchForm.scheme !=1" @click="addScheme">新增价格区间</el-button>
        <el-button class="copy-btn" @click="copyScheme">复制方案</el-button>
        <el-button class="modify-btn" v-if="schemeType != 1" @click="modifyScheme">修改方案名称</el-button>
        <el-button class="delete-btn" @click="deletePlan">删除方案</el-button>
      </div>
      <el-table :data="tableData" border>
        <el-table-column prop="title" label="标题"></el-table-column>
        <!-- <el-table-column prop="pay_type_name" label="类型"></el-table-column> -->
         <el-table-column prop="min" label="最低额度"></el-table-column>
        <el-table-column prop="max" label="最高额度"></el-table-column>
        <el-table-column prop="default_price" label="佣金价格"></el-table-column>
        <el-table-column prop="product_id" label="操作">
          <div slot-scope="scope">
            <el-button class="edit-btn" @click="editScheme(scope.row)">修改</el-button>
            <el-button class="delete-btn" @click="deleteScheme(scope.row)" v-if="scope.row.pay_type == 1">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <el-dialog :title="dialogTitle" :visible.sync="isShowModifyDialog" width="500px" class="scheme-dialog">
        <div v-if="searchForm.payType == 1">
          <el-form>
            <el-form-item label="区间：" prop="remark" class="interval-input">
              <el-input :disabled="editSchemeAble" placeholder="请输入最小区间" v-model="addSchemeForm.min" size="small" clearable></el-input>
              -
              <el-input :disabled="editSchemeAble" placeholder="请输入最大区间" v-model="addSchemeForm.max" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="商户佣金：" prop="remark">
              <el-input placeholder="请输入商户佣金" v-model="addSchemeForm.defaultPrice" size="small" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          <el-form>
            <el-form-item label="标题：" prop="remark" class="interval-input">
               <el-input placeholder="请输入标题" v-model="addSchemeForm.title" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="商户佣金：" prop="remark">
              <el-input placeholder="请输入商户佣金" v-model="addSchemeForm.defaultPrice" size="small" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowModifyDialog = false" class="cancle-btn">取 消</el-button>
          <el-button class="confirm-btn" :disabled="submitOptLoading" :loading="submitOptLoading" @click="submitScheme">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog :title="copyDialogTitle" :visible.sync="isShowCopyDialog" width="500px" class="copy-dialog">
        <div>
          <el-form>
            <el-form-item label="方案名称：" prop="remark">
              <el-input placeholder="请输入方案名称" v-model="copySchemeForm.title" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="平台类型：">
              <el-select v-model="copySchemeForm.platformType" placeholder="请选择平台类型" size="small">
                <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowCopyDialog = false" class="cancle-btn">取 消</el-button>
          <el-button class="confirm-btn" :disabled="submitOptLoading" :loading="submitOptLoading" @click="copyStrategy">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="创建默认方案" :visible.sync="isShowCreateDialog" width="500px" class="copy-dialog">
        <div>
          <el-form>
            <el-form-item label="默认方案名称：" prop="remark">
              <el-input placeholder="请先选择下面的平台类型" disabled v-model="createSchemeForm.title" size="small" clearable style="width: 230px;"></el-input>
            </el-form-item>
            <el-form-item label="平台类型：">
              <el-select v-model="createSchemeForm.platformType" placeholder="请选择平台类型" size="small" @change="changePlatformType">
                <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowCreateDialog = false" class="cancle-btn">取 消</el-button>
          <el-button class="confirm-btn" :disabled="submitOptLoading" :loading="submitOptLoading" @click="creartStrategy">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  apiFeeList,
  apiPromotionPercentageSchemeList,
  apiPromoterFeeList,
  apiCopyFeeScheme,
  apiAddFee,
  apiEditFee,
  apiDeleteFee,
  apiCreateFeeScheme,
  apiChangeFeeScheme,
  apiDeleteFeeScheme
} from '../../request/api';
export default {
  data() {
    return {
      editSchemeAble: false,
      tableData: [],
      searchForm: {
        scheme: '',
        token: window.sessionStorage.getItem('token'),
        platformType: "",
        payType: 1
      },
      addSchemeForm:{
        token: window.sessionStorage.getItem('token'),
        payType: 1,
        scheme: '',
        max: '',
        min: '',
        defaultPrice: ''
      },
      schemeData: [],
      taskTypeData:[{
        label: '销量价格',
        value: 1
      },
      // {
      //   label: '增值费用',
      //   value: 2
      // },{
      //   label: '流量价格',
      //   value: 3
      // },{
      //   label: '评论',
      //   value: 4
      // },
      ],
      platformTypeData: [{
          label: '淘宝',
          value: 1
        },{
          label: '天猫',
          value: 2
        },{
          label: '京东',
          value: 3
        },{
          label: '1688',
          value: 4
        },{
          label: '唯品会',
          value: 13
        },{
          label: '拼多多',
          value: 15
        },{
        label: '抖音',
        value: 20
      }],
        platformTypeList: [],
        submitOptLoading: false,
        isShowModifyDialog:false,
        dialogTitle: '新增收费标准',
        dialogType: 'add',
        copySchemeForm: {
          token: window.sessionStorage.getItem('token'),
          title: '',
          scheme: '',
          platformType: '',
          originPlatformType:''
        },
        createSchemeForm:{
          token: window.sessionStorage.getItem('token'),
          title: '',
          platformType: ''
        },
        isShowCopyDialog: false,
        copyDialogTitle: '',
        showDialogType: '',
        isShowCreateDialog: false,
        userPhone:  window.sessionStorage.getItem("userPhone"),
        shopTypeList: window.sessionStorage.getItem("shopTypeList"),
        schemeType: null
    };
  },
  created() {
    this.getSchemeData()
    this.getTableData();
    if(!this.shopTypeList || this.shopTypeList == null){
      this.platformTypeList = this.platformTypeData
    } else {
      let shopShowTypeArr = this.shopTypeList.split(',')
      for(var i in this.platformTypeData){
        if(shopShowTypeArr.indexOf(this.platformTypeData[i].value.toString()) >=0) {
          this.platformTypeList.push(this.platformTypeData[i])
        }
      }
      console.log(this.platformTypeList)
    }
  },
  methods: {
    modifyScheme(){
      if(!this.searchForm.scheme){
        this.$message.error('请先选择方案')
        return
      }
      this.$prompt('请输入方案名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
        inputErrorMessage: '方案名不能为空'
      }).then(({ value }) => {
        apiChangeFeeScheme({
          token: window.sessionStorage.getItem('token'),
          feeSchemeId: this.searchForm.scheme,
          title: value
        })
          .then(res => {
          if(res.code==1){
            this.$message.success('修改成功')
            this.getTableData()
            this.getSchemeData()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {

      });
    },
    deletePlan(){
      if(!this.searchForm.scheme){
        this.$message.error('请先选择方案')
        return
      }
      this.$confirm('是否删除该方案?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
         apiDeleteFeeScheme({
           token: window.sessionStorage.getItem('token'),
           feeSchemeId: this.searchForm.scheme
         })
           .then(res => {
           if(res.code==1){
             this.$message.success('删除成功')
             this.getTableData()
             this.getSchemeData()
             this.searchForm.scheme = ''
           } else {
             this.$message.error(res.msg)
           }
         })
      }).catch(() => {

      });
    },
    getSchemeData(){
      apiPromoterFeeList({
        token: window.sessionStorage.getItem('token')
      })
        .then(res => {
        this.schemeData = res.msg;
      })
      .catch(res => {

      });
    },
    addScheme() {
      if(!this.searchForm.scheme){
        this.$message.error('请先选择方案')
        return
      }
      this.editSchemeAble = false
      this.isShowModifyDialog = true;
      this.addSchemeForm = {
        token: window.sessionStorage.getItem('token'),
        type: this.searchForm.platformType,
        scheme: this.searchForm.scheme,
        max: '',
        min: '',
        defaultPrice: ''
      }
      this.dialogTitle = '新增收费标准'
      this.dialogType = 'add'
    },
    editScheme(row){
      this.editSchemeAble = false
      if (row.platform_type == 20){
        this.editSchemeAble = true
      }
      this.isShowModifyDialog = true;
      if(this.searchForm.payType == 1){
        this.addSchemeForm = {
          token: window.sessionStorage.getItem('token'),
          payType: row.pay_type,
          scheme: row.scheme_id,
          max: row.max,
          min: row.min,
          defaultPrice: row.default_price,
          id: row.id
        }
      } else {
        this.addSchemeForm = {
          token: window.sessionStorage.getItem('token'),
          payType: row.pay_type,
          scheme: row.scheme_id,
          title: row.title,
          defaultPrice: row.default_price,
          id: row.id
        }
      }

      this.dialogTitle = '编辑收费标准'
      this.dialogType = 'edit'
    },
    submitScheme() {
      this.submitOptLoading = true
      if(this.dialogType == 'add'){

        if(!this.addSchemeForm.min){
           this.$message.error('最低额度不能为空')
           this.submitOptLoading = false
           return
        }
        if(!this.addSchemeForm.max){
          this.$message.error('最高额度不能为空')
          this.submitOptLoading = false
          return
        }
        if(parseInt(this.addSchemeForm.min)>=parseInt(this.addSchemeForm.max)){
          this.$message.error('最低额度要小于最高额度')
          this.submitOptLoading = false
          return
        }
        if(this.searchForm.payType != 1){
          this.$message.error('只能新增销量收费标准')
          this.submitOptLoading = false
          return
        }
        if(!this.addSchemeForm.defaultPrice){
          this.$message.error('商户佣金不能为空')
          this.submitOptLoading = false
          return
        }
        apiAddFee(this.addSchemeForm)
          .then(res => {
            this.submitOptLoading = false
            if(res.code==1){
              this.$message.success('新增成功')
              this.getTableData()
              this.isShowModifyDialog = false
            } else {
              this.$message.error(res.msg)
            }
        })
        .catch(res => {
          this.submitOptLoading = false
        });
      } else {

       if(this.searchForm.payType == 1){
         if(this.addSchemeForm.min == '' && this.addSchemeForm.min != '0'){
            this.$message.error('最低额度不能为空')
            this.submitOptLoading = false
            return
         }
         if(parseInt(this.addSchemeForm.min) < 0){
           this.$message.error('最低额度不能小于0')
           this.submitOptLoading = false
           return
         }
         if(!this.addSchemeForm.max){
           this.$message.error('最高额度不能为空')
           this.submitOptLoading = false
           return
         }
         if(parseInt(this.addSchemeForm.min)>=parseInt(this.addSchemeForm.max)){
           this.$message.error('最低额度要小于最高额度')
           this.submitOptLoading = false
           return
         }
       }
       if(!this.addSchemeForm.defaultPrice){
         this.$message.error('商户佣金不能为空')
         this.submitOptLoading = false
         return
       }
        apiEditFee(this.addSchemeForm)
          .then(res => {
          this.submitOptLoading = false
          if(res.code==1){
            this.$message.success('编辑成功')
            this.getTableData()
            this.isShowModifyDialog = false
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(res => {
          this.submitOptLoading = false
        });
      }
    },
    deleteScheme(row){
      if (row.platform_type == 20){
        this.$message.error('抖音价格区间不可删除')
        return
      }
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiDeleteFee({
          token: window.sessionStorage.getItem('token'),
          id: row.id
        })
        .then(res => {
         this.$message.success('删除成功')
         this.getTableData()
        })
        .catch(res => {
          this.$message.error('数据加载失败')
        });
      }).catch(() => {

      });
    },
    getTableData() {
       this.$showLoading()
      apiFeeList(this.searchForm)
        .then(res => {
         this.$hideLoading()
         if(res.code == 1){
           this.tableData = res.data;
         }
      })
      .catch(res => {
         this.$hideLoading()
        this.$message.error('数据加载失败')
      });
    },
    copyScheme(){
      if(!this.searchForm.scheme){
        this.$message.error('请先选择方案')
        return
      }
      this.copySchemeForm = {
        token: window.sessionStorage.getItem('token'),
        title: '',
        scheme: this.searchForm.scheme,
        platformType: '',
        originPlatformType:this.searchForm.platformType
      }
      this.isShowCopyDialog = true
      for(var i in this.schemeData){
        if(this.searchForm.scheme == this.schemeData[i].id){
          this.copyDialogTitle = '正在复制' + this.schemeData[i].title + ',请选择平台'
        }
      }
    },
    showCreatSchemeDialog(){
      this.createSchemeForm = {
        token: window.sessionStorage.getItem('token'),
        title: '',
        platformType: ''
      }
      this.isShowCreateDialog = true
    },
    copyStrategy(){
      if(!this.copySchemeForm.title){
        this.$message.error('方案名称不能为空')
        return
      }
      if(!this.copySchemeForm.platformType){
        this.$message.error('平台类型不能为空')
        return
      }
      this.submitOptLoading = true
      apiCopyFeeScheme(this.copySchemeForm)
        .then(res => {
        this.submitOptLoading = false
        if(res.code==1){
          this.$message.success('复制成功')
          this.getTableData()
          this.getSchemeData()
          this.isShowCopyDialog = false
        } else {
          this.$message.error(res.msg)
        }
      })
      .catch(res => {
        this.submitOptLoading = false
      });
    },
    creartStrategy (){
      if(!this.createSchemeForm.platformType){
        this.$message.error('平台类型不能为空')
        return
      }
      apiCreateFeeScheme(this.createSchemeForm)
        .then(res => {
        this.submitOptLoading = false
        if(res.code==1){
          this.$message.success('创建成功')
          this.getTableData()
          this.getSchemeData()
          this.isShowCreateDialog = false
        } else {
          this.$message.error(res.msg)
        }
      })
      .catch(res => {
        this.submitOptLoading = false
      });
    },
    changePlatformType(val){
      switch (val){
        case 1:
          this.createSchemeForm.title = '淘宝-' + this.userPhone + '-默认方案'
          break;
        case 2:
          this.createSchemeForm.title = '天猫-' + this.userPhone + '-默认方案'
          break;
        case 3:
          this.createSchemeForm.title = '京东-' + this.userPhone + '-默认方案'
          break;
        case 4:
          this.createSchemeForm.title = '1688-' + this.userPhone + '-默认方案'
          break;
        case 13:
          this.createSchemeForm.title = '唯品会-' + this.userPhone + '-默认方案'
          break;
        case 15:
          this.createSchemeForm.title = '拼多多-' + this.userPhone + '-默认方案'
          break;
        case 20:
          this.createSchemeForm.title = '抖音-' + this.userPhone + '-默认方案'
          break;
      }
    },
    changeScheme(val){
      for(var i in this.schemeData){
        if(this.schemeData[i].id == val){
          this.searchForm.platformType = this.schemeData[i].platform_type
          this.schemeType = this.schemeData[i].scheme_type
        }
      }

      this.getTableData();
    },
    changeValue() {
      this.getTableData();
    }
  }
};
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.cost-strategy {
  .commissionText {
    text-align: right;
    color: red;
    margin-bottom: 10px;
  }
  .edit-btn {
    padding: 8px 15px;
    color: #ffffff;
    background: @themeColor;
  }
  .delete-btn {
    padding: 8px 15px;
    color: #ffffff;
    background: #f56c6c;
  }
  .btn-list {
    margin-bottom: 16px;
    .create-btn{
      padding: 8px 15px;
      color: #ffffff;
      background: green;
    }
    .add-btn {
      padding: 8px 15px;
      color: #ffffff;
      background: @themeColor;
    }
    .copy-btn {
      padding: 8px 15px;
      color: #ffffff;
      background: #f56c6c;
    }
    .modify-btn {
      padding: 8px 15px;
      color: #ffffff;
      background: blue;
    }
    .delete-btn {
      padding: 8px 15px;
      color: #ffffff;
      background: red;
    }
  }

  .confirm-btn {
    background: @themeColor;
    color: #ffffff;
  }
  .scheme-dialog {
    .interval-input {
      display: inline-block;
    	margin-left: 16px;
      .el-form-item__content {
        display: inline-block;
        .el-input--small {
          width: 150px!important;
        }

      }
    }

  }
}

</style>
